<template>
    <div class="up-and-down">
        <slot name="item"></slot>
        <transition name="marqueeItem"
                    v-on:before-leave="loop()">
            <div class="marquee-item" refs="mItem" v-for="(value,key) in list" :key="key" v-if="showIndex==key">
                <img class="muad-userheader" :src="value.icon" alt="">
                <div class="muad-des">
                    <p>{{value.topText}}</p>
                    <p>{{value.bottomText}}</p>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import  xurl from '../../../x/xurl'
    export default {
        name: "upAndDown",
        props:{
            waitTime:{
                type:Number
            },
            isNotLoop:{
               type:Boolean
            },
            marqueeList:{
                type:Array
            }
        },
        data(){
            return{
                showIndex:0,
                nowShowIndex:0,
                list:[],
                totalPage:null,
            }
        },
        mounted(){
            let that = this;
            this.marqueeFn(this.waitTime);
            this.list.push(...this.marqueeList);
        },
        methods:{
            marqueeFn(waitTime=3000){
                let that = this;
                setInterval(()=>{
                    that.showIndex ++ ;
                },waitTime)
            },
            loop(){
                if(!this.isNotLoop){
                    this.nowShowIndex ++;
                    if(this.list.length <= this.nowShowIndex + 1){
                        this.list.push(...this.list);
                    }
                }
            },
        }
    }
</script>

<style scoped lang="scss">
    .up-and-down{
        position: relative;
        height: .34rem;
        width: 1.2rem;
    }
    .marquee-item{
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        border-radius:.25rem;
        font-size: .11rem;
        color:#fff;
        /*width: 1.2rem;*/
        background: rgba(255, 128, 87, 1);
        padding-left: .07rem;
        margin: 0;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }
    .muad-userheader{
        width: .19rem;
        height: .19rem;
        padding: .01rem;
        background-color: #fff;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        margin-right: .1rem;
    }
    .muad-des{
        padding-right: .1rem;
        padding-top: .04rem;
        padding-bottom: .04rem;
        height: .34rem;
        line-height: .13rem;
        font-size: .11rem;
        p{
            white-space: nowrap;
        }
    }
    .marqueeItem-enter-active,.marqueeItem-leave-active{
        transition: all 1s;
    }
    .marqueeItem-enter{
        opacity: 0;
        transform: translateY(.36rem);
    }
    .marqueeItem-leave-to{
        opacity: 0;
        transform: translateY(-.36rem);
    }
</style>